<template>
  <div class="setup-nickname">
    <span class="nick-title">我的昵称</span>
    <div class="nick-cont">
      <input v-model="nickname" type="text" class="nick-input">
      <p class="nick-hint">用户名只能包括汉字、英文字母、数字和下划线</p>
      <div class="nick-btn" @click="updateUserInfo()">修改</div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      nickname:''
    }
  },
  created(){
    this.nickname = this.$route.query.nickname;
  },
  //改为history.state是否有值(key)判断
  // beforeRouteEnter (to, from, next){
  //   next(vm => {
  //     // 通过 `vm` 访问组件实例,将值传入fromPath
  //     vm.fromPath = from.path
  //     console.log(to);
  //     console.log(from);
  //   })
  // },
  methods:{
    updateUserInfo(){
      if(!this.nickname){
        this.$message('请输入新的昵称');
        return;
      }
      this.$http.postForm('/user/updateUserInfo', {nickName:this.nickname}, res=>{
        this.$cookies.set("nickname", this.nickname, 0);
        //不刷新,此处更改后,路由变化,会自动刷新.
        // this.$store.commit('refreshLoginStatus');
        // this.$store.dispatch('refreshLoginStatus');
        this.util.goback();
        // if(history.state){
        //   this.$router.back(-1);
        // }else{
        //   this.$router.push('/');
        // }
      });
    }
  }
}
</script>

<style lang='scss' scoped>
.setup-nickname {
  padding: 30px;
  .nick-title {
    display: inline-block;
    vertical-align: top;
    //38 + 2
    line-height: 40px;
    text-align: center;
    width: 100px;
    color: #aaaaaa;
  }
  .nick-cont {
    display: inline-block;
    width: calc(100% - 100px);
    .nick-input {
      padding: 0 0 0 8px;
      outline: none;
      line-height: 38px;
      width: 300px;
      border: 1px solid #DDDDDD;
      border-radius: 3px;
    }
    .nick-hint {
      font-size: 13px;
      margin: 20px 0;
    }
    .nick-btn {
      cursor: pointer;
      text-align: center;
      width: 100px;
      line-height: 40px;
      background-color: $base-color;
      color: #ffffff;
      border-radius: 20px;
      font-size: 15px;
    }
  }
}
</style>